import React, { memo,useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { DjRadioDetailWrapper, LeftWrapper, RightWrapper } from './style'
import DjradioInfo from '../djradio-info'
import DjradioPrograms from '../djradio-programs'
import {
  getDjradioProgramsAction,
  getDjradioDetailAction
} from '../../store/actionCreators'
export default memo(function DjradioDetail() {
  const {id} = useParams()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getDjradioProgramsAction(id, 0))
    dispatch(getDjradioDetailAction(id))
  },[dispatch,id])
  return (
    <DjRadioDetailWrapper className="wrap-v2">
      <LeftWrapper>
        <DjradioInfo />
        <DjradioPrograms/>
      </LeftWrapper>
      <RightWrapper>right</RightWrapper>
    </DjRadioDetailWrapper>
  )
})
